<template>
  <div class="box">
    <header class="header">
      <div class="helpheader">
        <van-nav-bar
          title="帮助"
          left-arrow
          @click-left="$router.go(-1)"
        />
      </div>
    </header>
    <div class="content" id="content">
      <div class="contents">
        <h2 style="font-size:.16rem;margin:.16rem 0;">小懒猪记账使用帮助</h2>
        <h2>1、如何修改记账日期？</h2>
        <p>在记账的数字键盘中点击“今天”，即可选择想记录 的日期。</p>
        <h2>2、如何修改记账明细？</h2>
        <p>在“明细”页面，点击某条明细的类别图标、备注文字或金额，就可以修改对应的内容。</p>
        <h2>3、如何删除记账明细？</h2>
        <p>在“明细”页面，长按某条明细或某一天的明细，就会显示删除按钮，点击即可删除。</p>
        <h2>4、如何在首页快捷编辑记账？</h2>
        <p>在“我的”页面，关闭明细详情按钮，就可以使用以前的快捷编辑功能啦。</p>
        <h2>5、如何在图标曲线中看到最大的三笔费用？</h2>
        <p>在曲线上长按屏幕，即可看到top3明细，左右滑动可以切换日期。</p>
        <h2>6、推荐备注功能帮您提升记账速度</h2>
        <p>我们建议您每次记账的时候，记录2- 4个字的备注，方便您未来能够识别具体的消费明细。您下次记录备注的时候，我们会把之前的备注推荐给您，帮您提升记账速度。</p>
        <h2>7、记账正确的姿势</h2>
        <p>我们建议您养成消费后即时记账的习惯，这样才能帮助您未来对收支状况进行有效的分析。您可以通过设置中的定时提醒功能来提醒自己记账。</p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
export default {
  // 设置data初始值
  data () {
    return {}
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {}
}
</script>

<style lang="scss">
// 样式
  @import "@/lib/reset.scss";
  // 头部
  .helpheader {
    // 导航栏
    @include rect(100%, .6rem);
    @include background-color(#FDD949);
    /deep/ .van-nav-bar {
      height: 0.6rem;
      line-height: 0.6rem;
      background-color: #FDD949;
      // 左箭头
      .van-icon-arrow-left {
        color: black;
        font-size: .20rem;
      }
      // 标题
      .van-nav-bar__title {
        font-size: .18rem;
      }
    }
  }
  // 内容
  .contents {
    @include rect(3.46rem, auto);
    // 溢出显示滚动条
    @include overflow(auto);
    margin: 0 auto;
    font-size: .14rem;
    h2 {
      margin-bottom: .14rem;
    }
    p {
      margin-bottom: .14rem;
      text-indent:.24rem;
    }
  }
</style>
